<template>
  <div class="audit-home">
    <div class="container mx-auto px-4 py-6">
      <!-- 欢迎区域 -->
      <div class="welcome-section mb-8">
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-6 text-white">
          <h1 class="text-2xl font-bold mb-2">审核部门工作台</h1>
          <p class="text-indigo-100">今天是 {{ formatToday() }}，您有 {{ stats.pendingCount }} 个案件待处理</p>
        </div>
      </div>

      <!-- 审核统计 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">待处理条数</p>
              <p class="text-3xl font-bold text-orange-600">{{ stats.pendingCount }}</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-clock text-orange-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">结案条数</p>
              <p class="text-3xl font-bold text-green-600">{{ stats.completedCount }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-check-circle text-green-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">今日处理</p>
              <p class="text-3xl font-bold text-blue-600">{{ stats.todayProcessed }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-tasks text-blue-600"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 审批功能区域 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- 立案审批 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
              <h2 class="text-lg font-bold text-gray-800 flex items-center">
                <i class="fas fa-file-plus text-blue-600 mr-2"></i>
                立案审批
              </h2>
              <span class="text-sm bg-orange-100 text-orange-800 px-2 py-1 rounded">
                {{ stats.filingPending }} 待审批
              </span>
            </div>
          </div>
          <div class="p-6">
            <p class="text-gray-600 text-sm mb-4">审核新案件的立案申请，确保案件符合立案条件</p>
            <div class="space-y-3">
              <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">今日新增申请</span>
                <span class="font-medium text-blue-600">{{ stats.todayFiling }}</span>
              </div>
              <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">本周已审批</span>
                <span class="font-medium text-green-600">{{ stats.weekFiling }}</span>
              </div>
            </div>
            <router-link 
              to="/finance/filing-approval" 
              class="block w-full mt-4 bg-blue-600 text-white text-center py-2 rounded hover:bg-blue-700 transition-colors"
            >
              进入立案审批
            </router-link>
          </div>
        </div>

        <!-- 归档审批 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
              <h2 class="text-lg font-bold text-gray-800 flex items-center">
                <i class="fas fa-archive text-green-600 mr-2"></i>
                归档审批
              </h2>
              <span class="text-sm bg-orange-100 text-orange-800 px-2 py-1 rounded">
                {{ stats.archivePending }} 待审批
              </span>
            </div>
          </div>
          <div class="p-6">
            <p class="text-gray-600 text-sm mb-4">审核已结案件的归档申请，确保材料完整规范</p>
            <div class="space-y-3">
              <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">今日新增申请</span>
                <span class="font-medium text-blue-600">{{ stats.todayArchive }}</span>
              </div>
              <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">本周已归档</span>
                <span class="font-medium text-green-600">{{ stats.weekArchive }}</span>
              </div>
            </div>
            <router-link 
              to="/finance/archive-approval" 
              class="block w-full mt-4 bg-green-600 text-white text-center py-2 rounded hover:bg-green-700 transition-colors"
            >
              进入归档审批
            </router-link>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 最近审批记录 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">最近审批记录</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="case_ in pendingCases" :key="case_.id" class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex-1">
                  <p class="font-medium text-gray-800">{{ case_.title }}</p>
                  <p class="text-sm text-gray-600">申请人：{{ case_.applicant }}</p>
                  <p class="text-sm text-blue-600 font-medium">案件类型：{{ case_.type }}</p>
                  <p class="text-xs text-gray-500">{{ formatDate(case_.submittedAt) }}</p>
                </div>
                <div class="flex flex-col items-end space-y-2">
                  <span :class="getStatusClass(case_.status)" class="text-xs px-2 py-1 rounded">
                    {{ getStatusText(case_.status) }}
                  </span>
                  <button class="text-blue-600 hover:text-blue-700 text-sm"
                          @click="reviewCase(case_)">
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 案件查询 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">案件查询</h2>
          </div>
          <div class="p-6">
            <!-- 搜索表单 -->
            <div class="space-y-4 mb-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">案件编号</label>
                <el-input 
                  v-model="searchForm.caseNo" 
                  placeholder="请输入案件编号"
                  size="small"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">申请人姓名</label>
                <el-input 
                  v-model="searchForm.applicant" 
                  placeholder="请输入申请人姓名"
                  size="small"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">案件状态</label>
                <el-select v-model="searchForm.status" placeholder="请选择状态" size="small" style="width: 100%">
                  <el-option label="待审核" value="pending"></el-option>
                  <el-option label="审核中" value="reviewing"></el-option>
                  <el-option label="已通过" value="approved"></el-option>
                  <el-option label="已拒绝" value="rejected"></el-option>
                </el-select>
              </div>
              <el-button type="primary" size="small" @click="searchCases" class="w-full">
                <i class="fas fa-search mr-2"></i>查询
              </el-button>
            </div>
            
            <!-- 最近处理 -->
            <div>
              <h3 class="font-medium text-gray-800 mb-3">最近处理</h3>
              <div class="space-y-3">
                <div v-for="item in recentProcessed" :key="item.id" class="flex items-center justify-between">
                  <div>
                    <p class="text-sm font-medium text-gray-800">{{ item.title }}</p>
                    <p class="text-xs text-gray-500">{{ formatDateTime(item.processedAt) }}</p>
                  </div>
                  <div class="text-right">
                    <span :class="getResultClass(item.result)" class="text-xs px-2 py-1 rounded">
                      {{ item.result }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="mt-8">
        <h2 class="text-lg font-bold text-gray-800 mb-4">快速操作</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <router-link to="/finance/case-management" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-gavel text-orange-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">审批案件</h3>
            <p class="text-sm text-gray-500 mt-1">处理待审核案件</p>
          </router-link>
          
          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center cursor-pointer" @click="openCaseDetail">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-file-alt text-blue-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">立案审批详情</h3>
            <p class="text-sm text-gray-500 mt-1">查看案件详细信息</p>
          </div>
          
          <router-link to="/finance/statistics" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-chart-bar text-green-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">统计信息</h3>
            <p class="text-sm text-gray-500 mt-1">查看审核统计数据</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'AuditHome',
  setup() {
    const stats = ref({
      pendingCount: 15,
      completedCount: 128,
      todayProcessed: 8,
      filingPending: 8,
      archivePending: 7,
      todayFiling: 3,
      weekFiling: 12,
      todayArchive: 2,
      weekArchive: 9
    })
    
    const searchForm = reactive({
      caseNo: '',
      applicant: '',
      status: ''
    })
    
    const pendingCases = ref([
      {
        id: 1,
        title: '交通事故人身损害赔偿案',
        applicant: '王先生',
        type: '民事纠纷',
        status: 'pending',
        submittedAt: '2024-01-20'
      },
      {
        id: 2,
        title: '劳动合同纠纷案',
        applicant: '李女士',
        type: '劳动争议',
        status: 'reviewing',
        submittedAt: '2024-01-19'
      },
      {
        id: 3,
        title: '房屋买卖合同纠纷案',
        applicant: '张先生',
        type: '合同纠纷',
        status: 'pending',
        submittedAt: '2024-01-18'
      }
    ])
    
    const recentProcessed = ref([
      {
        id: 1,
        title: '知识产权侵权案',
        result: '已通过',
        processedAt: '2024-01-20 14:30:00'
      },
      {
        id: 2,
        title: '医疗事故纠纷案',
        result: '已拒绝',
        processedAt: '2024-01-20 11:15:00'
      },
      {
        id: 3,
        title: '借款合同纠纷案',
        result: '已通过',
        processedAt: '2024-01-19 16:20:00'
      }
    ])
    
    const formatToday = () => {
      return dayjs().format('YYYY年MM月DD日 dddd')
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const formatDateTime = (date) => {
      return dayjs(date).format('MM-DD HH:mm')
    }
    
    const getStatusClass = (status) => {
      const classes = {
        pending: 'bg-yellow-100 text-yellow-800',
        reviewing: 'bg-blue-100 text-blue-800',
        approved: 'bg-green-100 text-green-800',
        rejected: 'bg-red-100 text-red-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }
    
    const getStatusText = (status) => {
      const texts = {
        pending: '待审核',
        reviewing: '审核中',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return texts[status] || '未知'
    }
    
    const getResultClass = (result) => {
      const classes = {
        '已通过': 'bg-green-100 text-green-800',
        '已拒绝': 'bg-red-100 text-red-800',
        '待补充': 'bg-yellow-100 text-yellow-800'
      }
      return classes[result] || 'bg-gray-100 text-gray-800'
    }
    
    const reviewCase = (case_) => {
      ElMessage.info(`正在审核案件：${case_.title}`)
    }
    
    const searchCases = () => {
      ElMessage.success('案件查询功能开发中...')
    }
    
    const openCaseDetail = () => {
      ElMessage.info('立案审批详情功能开发中...')
    }
    
    return {
      stats,
      searchForm,
      pendingCases,
      recentProcessed,
      formatToday,
      formatDate,
      formatDateTime,
      getStatusClass,
      getStatusText,
      getResultClass,
      reviewCase,
      searchCases,
      openCaseDetail
    }
  }
}
</script>

<style scoped>
.audit-home {
  padding: 20px 0;
}
</style>